<template>
  <div class="page">
    <el-card>
      <el-tabs type="border-card">
        <el-tab-pane label="采集日志">
          <div class="l-f">
            <el-button type="primary" size="small" @click="onRefresh(1)">刷新日志</el-button>
            <el-button type="primary" size="small" @click="toBottom(1)">到日志尾部</el-button>
            <el-button type="primary" size="small" @click="onClear(1)">清空日志</el-button>
            <el-button type="primary" size="small" @click="onRestart(1)">重启采集程序</el-button>
            <el-button type="primary" size="small">下载采集程序</el-button>
            <el-button type="primary" size="small">下载所有日志</el-button>
          </div>
          <div id="content1" class="content" v-html="content"></div>
        </el-tab-pane>
        <el-tab-pane label="云服务日志">
          <div class="l-f">
            <div class="l-f l-mg-right10">
              <span class="label">云中心：</span>
              <el-select v-model="cloudValue" placeholder="请选择" size="small">
              <el-option
                v-for="item in cloudList"
                :key="item.value"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
            </div>
            <el-button type="primary" size="small" @click="onRefresh(2)">刷新日志</el-button>
            <el-button type="primary" size="small" @click="toBottom(2)">到日志尾部</el-button>
            <el-button type="primary" size="small" @click="onClear(2)">清空日志</el-button>
            <el-button type="primary" size="small" @click="onRestart(2)">重启采集程序</el-button>
            <el-button type="primary" size="small">下载采集程序</el-button>
            <el-button type="primary" size="small">下载所有日志</el-button>
          </div>
          <div id="content2" class="content" v-html="content"></div>
        </el-tab-pane>
        <el-tab-pane label="触发器日志">
          <div class="l-f">
            <el-button type="primary" size="small" @click="onRefresh(3)">刷新日志</el-button>
            <el-button type="primary" size="small" @click="toBottom(3)">到日志尾部</el-button>
            <el-button type="primary" size="small" @click="onClear(3)">清空日志</el-button>
            <el-button type="primary" size="small" @click="onRestart(3)">重启采集程序</el-button>
            <el-button type="primary" size="small">下载采集程序</el-button>
            <el-button type="primary" size="small">下载所有日志</el-button>
          </div>
          <div id="content3" class="content" v-html="content"></div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        cloudList: [
          {
            name: '云服务中心',
            value: 1
          },
          {
            name: '2.248',
            value: 2
          }
        ],
        cloudValue: '',
        content: `
        2023-06-24 00:53:05 ERROR ERROR CRC received 0xB2E2 != CRC calculated 0xBF22</br>

2023-06-24 00:53:05 INFO current timestamp:1687539185681</br>
2023-06-24 00:53:05 INFO diff timestamp:225160</br>
2023-06-24 00:53:20 INFO dev name coll 细纱机</br>
2023-06-24 00:53:20 INFO current timestamp:1687539200011</br>
2023-06-24 00:53:25 INFO current timestamp:1687539205247</br>
2023-06-24 00:53:25 INFO diff timestamp:5236400</br>
2023-06-24 00:53:25 INFO dev name coll 细纱机电表</br>
2023-06-24 00:53:25 INFO current timestamp:1687539205248</br>
2023-06-24 00:53:25 INFO current timestamp:1687539205432</br>
2023-06-24 00:53:25 INFO diff timestamp:183440</br>
2023-06-24 00:53:40 INFO dev name coll 细纱机电表</br>
2023-06-24 00:53:40 INFO current timestamp:1687539220013</br>
2023-06-24 00:53:40 INFO current timestamp:1687539220195</br>
2023-06-24 00:53:40 INFO diff timestamp:182280</br>
2023-06-24 00:53:40 INFO dev name coll 细纱机</br>
2023-06-24 00:53:40 INFO current timestamp:1687539220195</br>
2023-06-24 00:53:45 INFO current timestamp:1687539225493</br>
2023-06-24 00:53:45 INFO diff timestamp:5297900</br>
2023-06-24 00:54:00 INFO dev name coll 细纱机</br>
2023-06-24 00:54:00 INFO current timestamp:1687539240014</br>
2023-06-24 00:54:05 INFO current timestamp:1687539245181</br>
2023-06-24 00:54:05 INFO diff timestamp:5166840</br>
2023-06-24 00:54:05 INFO dev name coll 细纱机电表</br>
2023-06-24 00:54:05 INFO current timestamp:1687539245185</br>
2023-06-24 00:54:05 INFO current timestamp:1687539245369</br>
2023-06-24 00:54:05 INFO diff timestamp:184460</br>
2023-06-24 00:54:20 INFO dev name coll 细纱机电表</br>
2023-06-24 00:54:20 INFO current timestamp:1687539260198</br>
2023-06-24 00:54:20 INFO current timestamp:1687539260396</br>
2023-06-24 00:54:20 INFO diff timestamp:198340</br>
2023-06-24 00:54:20 INFO dev name coll 细纱机</br>
2023-06-24 00:54:20 INFO current timestamp:1687539260397</br>
2023-06-24 00:54:25 INFO current timestamp:1687539265594</br>
2023-06-24 00:54:25 INFO diff timestamp:5196540</br>
2023-06-24 00:54:40 INFO dev name coll 细纱机</br>
2023-06-24 00:54:40 INFO current timestamp:1687539280011</br>
2023-06-24 00:54:45 INFO current timestamp:1687539285273</br>
2023-06-24 00:54:45 INFO diff timestamp:5262340</br>
2023-06-24 00:54:45 INFO dev name coll 细纱机电表</br>
2023-06-24 00:54:45 INFO current timestamp:1687539285274</br>
2023-06-24 00:54:45 INFO current timestamp:1687539285454</br>
2023-06-24 00:54:45 INFO diff timestamp:180100</br>
2023-06-24 00:55:00 INFO dev name coll 细纱机电表</br>
2023-06-24 00:55:00 INFO current timestamp:1687539300011</br>
2023-06-24 00:55:00 INFO current timestamp:1687539300191</br>
2023-06-24 00:55:00 INFO diff timestamp:179680</br>
2023-06-24 00:55:00 INFO dev name coll 细纱机</br>
2023-06-24 00:55:00 INFO current timestamp:1687539300191</br>
2023-06-24 00:55:05 INFO current timestamp:1687539305469</br>
2023-06-24 00:55:05 INFO diff timestamp:5277360</br>
2023-06-24 00:55:20 INFO dev name coll 细纱机电表</br>
2023-06-24 00:55:20 INFO current timestamp:1687539320012</br>
2023-06-24 00:55:20 INFO current timestamp:1687539320190</br>
2023-06-24 00:55:20 INFO diff timestamp:178380</br>
2023-06-24 00:55:20 INFO dev name coll 细纱机</br>
2023-06-24 00:55:20 INFO current timestamp:1687539320191</br>
2023-06-24 00:55:25 INFO current timestamp:1687539325372</br>
2023-06-24 00:55:25 INFO diff timestamp:5181040</br>
2023-06-24 00:55:40 INFO dev name coll 细纱机</br>
2023-06-24 00:55:40 INFO current timestamp:1687539340151</br>
2023-06-24 00:55:45 INFO current timestamp:1687539345316</br>
2023-06-24 00:55:45 INFO diff timestamp:5164880</br>
2023-06-24 00:55:45 INFO dev name coll 细纱机电表</br>
2023-06-24 00:55:45 INFO current timestamp:1687539345317</br>
2023-06-24 00:55:45 INFO current timestamp:1687539345587</br>
2023-06-24 00:55:45 INFO diff timestamp:270320</br>
2023-06-24 00:56:00 INFO dev name coll 细纱机电表</br>
2023-06-24 00:56:00 INFO current timestamp:1687539360013</br>
2023-06-24 00:56:00 INFO current timestamp:1687539360194</br>
2023-06-24 00:56:00 INFO diff timestamp:180900</br>
2023-06-24 00:56:00 INFO dev name coll 细纱机</br>
2023-06-24 00:56:00 INFO current timestamp:1687539360196</br>
2023-06-24 00:56:05 INFO current timestamp:1687539365487</br>
2023-06-24 00:56:05 INFO diff timestamp:5291460</br>
2023-06-24 00:56:20 INFO dev name coll 细纱机</br>
2023-06-24 00:56:20 INFO current timestamp:1687539380011</br>
2023-06-24 00:56:25 INFO current timestamp:1687539385233</br>
2023-06-24 00:56:25 INFO diff timestamp:5221380</br>
2023-06-24 00:56:25 INFO dev name coll 细纱机电表</br>
2023-06-24 00:56:25 INFO current timestamp:1687539385233</br>
2023-06-24 00:56:25 INFO current timestamp:1687539385415</br>
2023-06-24 00:56:25 INFO diff timestamp:181580</br>
2023-06-24 00:56:40 INFO dev name coll 细纱机电表</br>
2023-06-24 00:56:40 INFO current timestamp:1687539400011</br>
2023-06-24 00:56:40 INFO current timestamp:1687539400192</br>
2023-06-24 00:56:40 INFO diff timestamp:181320</br>
2023-06-24 00:56:40 INFO dev name coll 细纱机</br>
2023-06-24 00:56:40 INFO current timestamp:1687539400193</br>
2023-06-24 00:56:45 INFO current timestamp:1687539405342</br>
2023-06-24 00:56:45 INFO diff timestamp:5149500</br>
2023-06-24 00:57:00 INFO dev name coll 细纱机</br>
2023-06-24 00:57:00 INFO current timestamp:1687539420105</br>
2023-06-24 00:57:05 INFO current timestamp:1687539425302</br>
2023-06-24 00:57:05 INFO diff timestamp:5197140</br>
2023-06-24 00:57:05 INFO dev name coll 细纱机电表</br>
2023-06-24 00:57:05 INFO current timestamp:1687539425303</br>
2023-06-24 00:57:05 INFO current timestamp:1687539425516</br>
        `
      }
    },
    methods: {
      // 刷新
      onRefresh() {
        console.log('刷新')
      },
      // 到底部
      toBottom(type) {
        const content = document.getElementById('content' + type)
        content.scrollTop = content.scrollHeight
      },
      // 清空日志
      onClear() {
        this.content = '日志为空~'
      },
      // 重启
      onRestart() {
        this.$message.success('重启成功!')
      }
    }
  }
</script>

<style lang="scss" scoped>
.content {
  height: 70vh;
  margin-top: 20px;
  background-color: #F5F7FA;
  border:1px solid #E4E7ED;
  border-radius: 4px;
  overflow-y: auto;
  font-size: 14px;
  color: #C0C4CC;
  line-height: 24px;
  padding: 20px;
  box-sizing: border-box;
}
.label {
  font-size: 14px;
  font-weight: 700;
}
</style>